<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 理想视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入图标 -->
    <link rel="stylesheet" href="../font/iconfont.css">
    <!-- 引入外部样式表 -->
    <link rel="stylesheet" href="../css/淘宝案例.css">
</head>

<body>
    <header>

        <input type="text" placeholder="请输入您要查找的商品">
    </header>
    <section>
        <ul>
            <li>产品1</li>
            <li>产品2</li>
            <li>产品3</li>
            <li>产品4</li>
            <li>产品5</li>
            <li>产品6</li>
            <li>产品7</li>
            <li>产品8</li>
            <li>产品9</li>
            <li>产品10</li>
            <li>产品11</li>
            <li>产品12</li>
            <li>产品13</li>
            <li>产品14</li>
            <li>产品15</li>
            <li>产品16</li>
            <li>产品17</li>
            <li>产品18</li>
        </ul>


        <div>
            <p>优选榜单</p>

            <main>
            <div>
                <img src="../img/yuan.png" alt="">
                <p>潮流穿搭</p>
            </div>
            <div>
                <img src="../img/yuan.png" alt="">
                <p>潮流穿搭</p>
            </div>
            <div>
                <img src="../img/yuan.png" alt="">
                <p>潮流穿搭</p>
            </div>
            <div>
                <img src="../img/yuan.png" alt="">
                <p>潮流穿搭</p>
            </div>
            <div>
                <img src="../img/yuan.png" alt="">
                <p>潮流穿搭</p>
            </div>
            <div>
                <img src="../img/yuan.png" alt="">
                <p>潮流穿搭</p>
            </div>
        </main>

        <p>优选榜单</p>

            <main>
            <div>
                <img src="../img/yuan.png" alt="">
                <p>潮流穿搭</p>
            </div>
            <div>
                <img src="../img/yuan.png" alt="">
                <p>潮流穿搭</p>
            </div>
            <div>
                <img src="../img/yuan.png" alt="">
                <p>潮流穿搭</p>
            </div>
            <div>
                <img src="../img/yuan.png" alt="">
                <p>潮流穿搭</p>
            </div>
            <div>
                <img src="../img/yuan.png" alt="">
                <p>潮流穿搭</p>
            </div>
            <div>
                <img src="../img/yuan.png" alt="">
                <p>潮流穿搭</p>
            </div>
        </main>

        <p>优选榜单</p>

            <main>
            <div>
                <img src="../img/yuan.png" alt="">
                <p>潮流穿搭</p>
            </div>
            <div>
                <img src="../img/yuan.png" alt="">
                <p>潮流穿搭</p>
            </div>
            <div>
                <img src="../img/yuan.png" alt="">
                <p>潮流穿搭</p>
            </div>
            <div>
                <img src="../img/yuan.png" alt="">
                <p>潮流穿搭</p>
            </div>
            <div>
                <img src="../img/yuan.png" alt="">
                <p>潮流穿搭</p>
            </div>
            <div>
                <img src="../img/yuan.png" alt="">
                <p>潮流穿搭</p>
            </div>
        </main>
        </div>

    </section>
    <footer>尾部</footer>
</body>

</html>